<template>
  <ContainerContent :loading="loading" :pagination="pagination" @run="run">
    <template #header>
      <a-button type="primary" @click="open(undefined)">
        <i-icons-add />
        添加用户
      </a-button>
      <CloudFilterBar v-model="params" :run="run" :schemes="filterSchemes" />
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #status="{ record }">
        <a-switch
          :model-value="record.status"
          :checked-value="1"
          :unchecked-value="2"
          size="small"
          :before-change="(val) => handleBeforeChange(record, val as 1 | 2)" />
      </template>
      <template #remark="{ record }">
        <edit-field
          type="input"
          edit-title="编辑备注"
          label="备注"
          mouse-over
          hover-table
          placeholder="请输入备注"
          field="remark"
          :no-verification="true"
          :max-length="20"
          :required="false"
          :content="record.remark"
          :fn="updateAdminApiUserUpdateApi"
          :refresh-fn="run"
          :params="{
            id: record.id,
            username: record.username,
            status: record.status,
            email: record.email
          }"
          :default-value="record.remark">
        </edit-field>
      </template>
      <template #action="{ record }">
        <a-link :hoverable="false" @click="open(record)"> 编辑 </a-link>
        <a-link
          :hoverable="false"
          status="danger"
          @click="resetPwdOpen(record)">
          重置密码
        </a-link>
      </template>
    </a-table>
    <edit-user-dialog
      v-model:visible="visible"
      :record="userData"
      @refresh="run" />
    <reset-password-dialog v-model:visible="pwdVisible" :record="pwdData" />
  </ContainerContent>
</template>
<script lang="ts" setup>
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useTable } from '@/hooks'
import { useListRequest } from '@/hooks/useListRequest'
import { commonTableProps } from '@/utils/table'
import useTableColumn from './column'
import EditUserDialog from './components/EditUserDialog.vue'
import ResetPasswordDialog from './components/ResetPasswordDialog.vue'
import {
  getAdminApiUsersListApi,
  updateAdminApiUserStatusApi,
  updateAdminApiUserUpdateApi
} from '@/apis/modules/user'
const { columns, filterSchemes } = useTableColumn()

const { visible, data: userData, open } = usePopup()
const { visible: pwdVisible, data: pwdData, open: resetPwdOpen } = usePopup()
const params = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'created_at'
})

const handleBeforeChange = (row: any, status: 1 | 2) => {
  return new Promise((resolve) => {
    const fn = () => {
      return updateAdminApiUserStatusApi({ id: row.id!, status }).then(() => {
        row.status = status
        resolve(true)
      })
    }
    if (status === 2) {
      CloudModal.warn(
        {
          maskClosable: false,
          content: `确定要禁用 “${row.username}” 吗？禁用后，用户将被禁止登录。`
        },
        fn,
        () => resolve(false)
      )
    } else {
      fn()
    }
  })
}
const { data, loading, run, pagination } = useListRequest(
  getAdminApiUsersListApi,
  {
    immediate: true,
    params
  }
)

const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(params)
</script>
